<template>
  <div>
    <!-- Vant:导航栏 -->
    <van-nav-bar title="小U商城" />
    <!-- Vant:搜索 -->
    <van-search v-model="val" placeholder="请输入搜索关键词" />
    <!-- Vant:标签页  -->
    <van-tabs>
     <van-tab :key="item.id" v-for="item in firstCateArr" :title="item.catename">
     </van-tab>
    </van-tabs>
    <!-- Vant:轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="imgHost+image.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 秒杀活动  Vant:宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
          <!-- Vant:倒计时 -->
          <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-grid-item>
    </van-grid>
    <!-- 推荐商品  Vant:标签页 -->
    <van-tabs type="card" @click="selectTab">
      <van-tab v-for="(item,ind) in recInfo" :key="ind" :title="item">
        <!-- Vant:商品卡片 -->
        <van-card v-for="items in recGoodsArr[num]?recGoodsArr[num].content:[]" :key="items.id"
          :tag="recInfo[num]"
          :price="items.price"
          :title="items.goodsname"
          :thumb="imgHost+items.img"
          :origin-price="items.market_price"
        />        
      </van-tab>
    </van-tabs>    
  </div>
</template>

<script>

import Vue from 'vue';
import { Lazyload } from 'vant';   //Vant的轮播
Vue.use(Lazyload);

//import {getFirstCate,getBanners,getRecGoods} from '../../../request/api.js'
import {getRecGoods} from '../../../request/api.js'

import {mapGetters,mapActions} from 'vuex'

export default {
   data(){
    return {
      val:'',
     // firstCateArr:[],//所有商品的一级分类
      //images: [],//轮播图 
      time: 30 * 60 * 60 * 1000,  //倒计时的时间  
      recInfo:['热门推荐','上新推荐','所有商品'], 
      recGoodsArr:[],//所有推荐商品
      num:0,//推荐商品数组的下标
    }
   },
   computed:{
    ...mapGetters({
      firstCateArr:'shop/firstCateArr',
      images:'shop/images'
    })
   },
   methods:{
        ...mapActions({
          firstCateData:'shop/getFirstCateData',
          getAdvInfo:'shop/getAdvImages'
        }),
        //单击某个商品推荐分类：
        selectTab(n){
           // console.log(n,'nnnn');
           this.num = n;
        },
        //获取所有推荐商品数据：
        getAllRecGoods(){   
            getRecGoods().then(d=>{
              if(d.status == 200){
                this.recGoodsArr = d.data.list;
               // console.log(this.recGoodsArr,'this.recGoodsArr');
              }
            }).catch(e=>{
              console.log(e);
            });
        }
   },
   mounted(){
             
      this.getAllRecGoods();

      //获取所有商品的一级分类数据：
      this.firstCateData();

      //获取轮播图数据：
      this.getAdvInfo();

    //console.log(process.env.NODE_ENV,'环境');
   // console.log(this.imgHost,'imgHost');
       //获取所有商品的一级分类数据：
      //  getFirstCate().then(d=>{
      //     if(d.status == 200){//成功
      //        this.firstCateArr = d.data.list;
      //     }
      //  }).catch(e=>{
      //   console.log(e);
      //  });

       //获取轮播图数据：
      //  getBanners().then(d=>{
      //   if(d.status == 200){
      //      for(let obj of d.data.list){
      //         this.images.push(obj.img);
      //      }
      //      // console.log(this.images,'img');
      //   }
      //  }).catch(e=>{
      //   console.log(e);
      //  })
   }
}

</script>

<style scoped>
.van-nav-bar{
  background-color: red;
}

.van-nav-bar /deep/ .van-nav-bar__title{
  color:white;
  font-size: 26px;
}

.van-swipe img {
  width:100vw;
  height: 130px;
}
</style>